<template>
    <div>
        <x-form ref="xForm" v-model="formData" :config="formConfig">
            <template #executionListener>
                <el-badge :value="executionListenerLength">
                    <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
                </el-badge>
            </template>
        </x-form>
        <executionListenerDialog
                v-if="dialogName === 'executionListenerDialog'"
                :element="element"
                :modeler="modeler"
                @close="finishExecutionListener"
        />
    </div>
</template>

<script>
    import mixinPanel from '../../common/mixinPanel'
    import mixinExecutionListener from '../../common/mixinExecutionListener'
    import {parseCDATA} from '../../common/util'

    export default {
        mixins: [mixinPanel, mixinExecutionListener],
        data() {
            return {
                formData: {}
            }
        },
        computed: {
            formConfig() {
                return {
                    inline: false,
                    item: [
                        {
                            xType: 'input',
                            name: 'id',
                            label: '节点id',
                            rules: [
                                {required: true, message: '节点id不能为空'},
                                {pattern: /^[a-z_][\w-.]*$/i, message: '节点id格式不正确'}
                            ]
                        },
                        {
                            xType: 'input',
                            name: 'name',
                            label: '节点名称'
                        },
                        {
                            xType: 'colorPicker',
                            name: 'color',
                            label: '节点颜色',
                            show: false
                        },
                        {
                            xType: 'slot',
                            name: 'executionListener',
                            label: '执行监听器'
                        },
                        {
                            xType: 'input',
                            name: 'conditionExpression',
                            label: '跳转条件'
                        },
                        {
                            xType: 'input',
                            name: 'skipExpression',
                            label: '跳过表达式'
                        }
                    ]
                }
            }
        },
        watch: {
            'formData.conditionExpression': function (val) {
                if (val) {
                    const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', {body: `<![CDATA[${val}]]>`})
                    this.updateProperties({conditionExpression: newCondition})
                } else {
                    this.updateProperties({conditionExpression: null})
                }
            },
            'formData.skipExpression': function (val) {
                if (val === '') val = null
                this.updateProperties({'flowable:skipExpression': val})
            }
        },
        created() {
            const cache = {
                ...this.element.businessObject,
                ...this.element.businessObject.$attrs
            }
            // 移除flowable前缀，格式化数组
            for (const key in cache) {
                if (key.indexOf('flowable:') === 0) {
                    const newKey = key.replace('flowable:', '')
                    cache[newKey] = cache[key]
                    delete cache[key]
                }
                if (key === 'conditionExpression') {
                    cache[key] = parseCDATA(cache[key].body)
                }
            }
            this.formData = cache
        }
    }
</script>

<style></style>
